<template>
  <div class="setting-role">
    <el-form :model="search" :inline="true">
      <el-form-item label="角色名称">
        <el-input v-model="search.roleName" placeholder="" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :icon="Plus" @click="editItem(0)">
          新增
        </el-button>
      </el-form-item>
    </el-form>

    <div class="tab-place">
      <el-table :data="tabData">
        <el-table-column label="名称" />
        <el-table-column label="描述" />
        <el-table-column label="操作" width="220">
          <template #default>
            <el-button link type="success" :icon="EditPen" @click="editItem(1)">
              编辑
            </el-button>
            <el-button link type="warning" :icon="DocumentCopy">
              复制
            </el-button>
            <el-button link type="danger" :icon="Delete">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <EditModule ref="editNode" />
  </div>
</template>

<script lang="ts" setup>
import { Plus, EditPen, DocumentCopy, Delete } from '@element-plus/icons-vue'
import { defineAsyncComponent, ref, reactive } from 'vue'
const EditModule = defineAsyncComponent(() => import('./component/role-edit.vue'))

// 查询表单
const search = reactive({ roleName: '' })

// 查询结果
const tabData = reactive([{}])

// ---------------------------- 展示操作
/**
 * 角色编辑弹窗
 * @param state 0-新增 1-编辑
 */
const editItem = (state: 0 | 1): void => {

  if (state === 1) {
    console.log('编辑')

  } else {
    console.log('新增')

  }

  editNode.value.dialogVisible = true
}


const editNode = ref()



</script>

<style lang="scss" scoped>

</style>
